<template>
    <view>
        <!-- 商品列表 -->
        <view class="goods-list">
            <view v-for="goods in goodsList" :key="goods.goods_id" @click="gotoDetail(goods)">
                <!-- 商品item项 -->
                <my-goodsitem :goods="goods"></my-goodsitem>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 查询商品列表的查询参数对象
                queryObj: {
                    // 查询关键字
                    query: '',
                    // 查询的商品id
                    cid: '',
                    // 获取第几页数据 页码值
                    pagenum: 1,
                    // 每页展示多少条数据
                    pagesize: 10
                },
                // 商品列表数据
                goodsList: [],
                // 商品总数 用来实现分页
                total: 0,
                // 是否正在上拉加载更多 默认false 发请求的时候设为true
                isLoading: false

            };
        },
        // 生命周期函数 可以拿到本页面的路径参数
        onLoad(options) {
            // console.log(options);
            // console.log(this.queryObj);
            // 页面一加载 给查询参数赋值
            this.queryObj.query = options.query || ''
            this.queryObj.cid = options.cid || ''
            this.getGoodsList()
        },
        methods: {
            // 获取商品列表数据
            async getGoodsList(cb) {
                // 是否正在加载设置 是 true
                this.isLoading = true
                const {
                    data: res
                } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
                // console.log(res);
                if (res.meta.status !== 200) return uni.$showMsg()
                // 数据请求完毕设是否真正加载设为false
                this.isLoading = false
                // 关闭下拉刷新效果
                cb && cb()
                // 保存商品列表和总数到data
                this.goodsList = [...this.goodsList, ...res.message.goods]
                this.total = res.message.total
            },
            // 商品item项点击事件 去往商品详情页 并携带参数
            gotoDetail(goods) {
                uni.navigateTo({
                    url: '/subpck/goods_detail/goods_detail?goods_id=' + goods.goods_id
                })
            }
        },
        // 监听上拉加载更多事件
        onReachBottom() {
            // 是否加载完毕
            if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('没有更多了')
            // 节流控制 如果正在加载 不发请求 
            if (this.isLoading) return
            // 获取下一页数据
            this.queryObj.pagenum++
            this.getGoodsList()
        },
        // 监听下拉刷新事件 
        onPullDownRefresh() {
            // 数据初始化
            // 1. 重新获取第一页数据
            this.queryObj.pagenum = 1
            // 2.数据总数重置为0
            this.total = 0
            // 3.数据列表重置为空
            this.goodsList = []
            // 4.节流阀重置关闭
            this.isLoading = false
            // 从新发起请求获取数据 传进去回调 关闭下拉刷新 效果 因为默认不会自动关闭
            this.getGoodsList(() => {
                uni.stopPullDownRefresh()
            })
        }
    }
</script>

<style lang="scss">
    .goods-list {}
</style>
